
<template>
  <div>
      <img v-if="loaded" :src="result.message" >
      <div v-if="!loaded" class="loading">
          加载中。。。。。。
      </div>
      <my-com :myname="'你好'"></my-com>
      <model-com :isOpen="myopen" @close-modal="myclose">
          <div>
             请充值，10万元
          </div>
      </model-com>
      <h1>{{mypid}}</h1>
      <button @click="open">打开</button>
  </div>
</template>
<script lang="ts">
// composition api --vue3  适合中大型 逻辑复杂的项目
// options api   ---vue2和vue3
import {getAnimal} from './hook/useDog'
import modelCom  from '../components/Model.vue'
import myCom from './myCom.vue'
import {ref,watch} from 'vue'
import {useRoute} from 'vue-router'
interface dogFace{
  message:string,
  status:string
}
export default {
  components:{myCom,modelCom},
  data(){
    return{

    }
  },
  // 使用 urlLoader 展示狗狗图片
  beforeMount() {

  },
  methods: {

  },
  computed:{},
  setup() {
        let {result,error,loaded}=getAnimal<dogFace>("https://dog.ceo/api/breeds/image/random")
        let myopen=ref(false);
        let open=()=>{ //打开对话框
          myopen.value=true;
        }
        let myclose=(a:number)=>{ //关闭对话框
            console.log(a)//子组件传来的数据
           myopen.value=false;
        }
        let  mypid=ref("")
        let route=useRoute();
          // ts 的类型断言  将route.query.pid 断言成 string类型
        //  mypid.value=<string>route.query.pid
         mypid.value=(route.query.pid as string)
       
        return {
            myopen,
            open,
            mypid,
            result,
            error,
            myclose,
            loaded
        }
  }
}
</script>
<style lang="less">
  .loading{
    font-size: 30px;
  }
</style>